<template>
	<u-popup
		:show="showPopup"
		closeOnClickOverlay
		overlay
		round='10'
		@close="showPopup=false"
		mode="bottom"
	>
		<view  style="margin: 0rpx;padding:1rpx" @touchmove.stop.prevent="() => {}">
			<view style="padding:20rpx 10rpx;text-align: center;font-weight: bold;" @touchmove.stop.prevent="() => {}"> 报名列表</view>
			<view style="flex-wrap: wrap;display: flex;justify-content: flex-start;margin: 0 0rpx;padding: 10rpx 10rpx; background-color: white;border-radius: 20rpx;z-index: 22;position: relative;box-shadow: rgb(186 186 186 / 51%) 0px 0px 10px 0px;">
				<view @click="onShowSeeder" 
					style="flex:1 0 20%;display: flex;align-items: center;;padding: 20rpx;margin: 10rpx;background-color: aliceblue;border-radius: 10rpx;">
					<i class="iconfont icon-erweima" style="width: 36rpx;color: red;"></i>
					<text style="padding-left: 8rpx;">模拟报名</text> 
				</view>
				<view @click="async()=>{
					showPopup = false
					$refs.seedEnrollPopup.show()
				}" style="flex:1 0 20%;display: flex;align-items: center;;padding: 20rpx;margin: 10rpx;background-color: aliceblue;border-radius: 10rpx;">
					<i class="iconfont icon-renyuanqun" style="width: 36rpx;height:36rpx;"></i>
					<text style="padding-left: 8rpx;">登记报名</text> 
				</view>
			</view>
			
			<u-tabs :list="tabs" @click="item=>currentSwiperItem=item.index" :current="currentSwiperItem"></u-tabs>
			
			<view v-if="enrollsByState(task.enrolls,-1).length == 0"
				style="text-align: center;padding:100rpx;color:#999"
			>
				还没有人报名,需要多多推广噢!
				<view style="padding: 100rpx;">
					<image :src="absUrl('/static/wx.jpg')" mode="widthFix" show-menu-by-longpress="true"></image>
				</view>
			</view>
			
			
			<view v-else style="padding-bottom: 50rpx;">
				
				<swiper @touchmove.stop.prevent="() => {}" style="height: 1200rpx;" :current="currentSwiperItem" disable-touch="true" circular :indicator-dots="false" :autoplay="false" easing-function="easeInCubic" :duration="300">
					<swiper-item style="padding: 0;">
						<scroll-view scroll-y style="height: 1200rpx;">
							<view style="margin:0 20rpx;padding:1rpx">
								<template v-for="(enroll,index) in readyEnrolls" >
									<enrollersCard :enroll="enroll">
										<template #default="{enroll}">
											<view style="display: flex;flex-direction: column;align-items: center;"> 
												<view @click="commit('assign',[enroll.id],false,{job_id:enroll.expected_job_id})" style="display: flex;align-items: center;border-radius: 10rpx;"
													:class="state(enroll).cls"
												> 
													<i v-if="state(enroll).iconCls" :class="state(enroll).iconCls" class="iconfont" style="width: 30rpx;height:30rpx;margin-right: 5rpx;"></i>
													<span style="font-size: 26rpx;font-weight: bold;">{{state(enroll).text}}</span>
												</view>
												
												<view @click="commit('reject',[enroll.id])" style="display: flex;align-items: center;border-radius: 10rpx;margin-top:5px"
													:class="state(enroll).cls"
												>
													<i v-if="state(enroll).iconCls" :class="state(enroll).iconCls" class="iconfont" style="width: 30rpx;height:30rpx;margin-right: 5rpx;"></i>
													<span style="font-size: 26rpx;font-weight: bold;">拒绝</span>
												</view>
											</view>
										</template>
									</enrollersCard>
								</template>
							</view>
						</scroll-view>
					</swiper-item>
					
					<swiper-item style="padding: 0;">
						<scroll-view scroll-y style="height: 1200rpx;">
							<view style="margin:0 20rpx;padding:1rpx">
								<template v-for="(enroll,index) in doneEnrolls" >
									<enrollersCard :enroll="enroll">
										<template #default="{enroll}">
											<view style="display: flex;flex-direction: column;align-items: center;">
												<view style="display: flex;align-items: center;border-radius: 10rpx;"
													:class="state(enroll).cls"
												>
													<i v-if="state(enroll).iconCls" :class="state(enroll).iconCls" class="iconfont" style="width: 30rpx;height:30rpx;margin-right: 5rpx;"></i>
													<span style="font-size: 26rpx;font-weight: bold;">{{state(enroll).text}}</span>
												</view>
												
												<view @click="commit('assign',[enroll.id],true)" style="display: flex;align-items: center;border-radius: 10rpx;margin-top:5px"
													class="state_raw"
												>
													<span style="font-size: 26rpx;font-weight: bold;">取消</span>
												</view>
											</view>
										</template>
									</enrollersCard>
								</template>
							</view>
						</scroll-view>
					</swiper-item>
					 
					<swiper-item style="padding: 0;">
						<scroll-view scroll-y style="height: 1200rpx;">
							<view style="margin:0 20rpx;padding:1rpx">
								<template v-for="(enroll,index) in rejectEnrolls" >
									<enrollersCard :enroll="enroll">
										<template #default="{enroll}">
											<view style="display: flex;flex-direction: column;align-items: center;">
												<view  style="display: flex;align-items: center;border-radius: 10rpx;"
													:class="state(enroll).cls"
												>
													<i v-if="state(enroll).iconCls" :class="state(enroll).iconCls" class="iconfont" style="width: 30rpx;height:30rpx;margin-right: 5rpx;"></i>
													<span style="font-size: 26rpx;font-weight: bold;">{{state(enroll).text}}</span>
												</view>
												
												<view @click="commit('reject',[enroll.id],true)" style="display: flex;align-items: center;border-radius: 10rpx;margin-top:5px"
													class="state_raw"
												>
													<span style="font-size: 26rpx;font-weight: bold;">取消</span>
												</view>
											</view>
										</template>
									</enrollersCard>
								</template>
							</view>
						</scroll-view>
					</swiper-item>
				</swiper>
			</view>
		</view>
	</u-popup>
	<enrollDialog ref="enrollDialog"></enrollDialog>
	<seedEnrollPopup ref="seedEnrollPopup" :enrolls="task.enrolls" :task="task"></seedEnrollPopup>
</template>

<script>
	import memberManager from './member-manager.js'
	import enrollDialog from './enrollDialog.vue'
	import seedEnrollPopup from './seedEnrollPopup.vue'
	import enrollersCard from './enrollersCard.vue'
	
	export default {
		components:{enrollDialog,seedEnrollPopup,enrollersCard},
		mixins:[memberManager],
		inject:['task'],
		data() {
			return {
				showPopup:false,
				enroll:null,
				currentSwiperItem:0,
				tabs:[
					{
						name: '报名',
					},
					{
						name: '已通过',
					},
					{
						name: '已拒绝',
					}
				]
			}
		},
		computed:{
			readyEnrolls() {
				return this.enrollsByState(this.task.enrolls,-1).filter((enroll)=>{
					return (!enroll.rejected_at && !enroll.kickout_at && !enroll.assigned_job_at)
				})
			},
			doneEnrolls() {
				return this.enrollsByState(this.task.enrolls,-1).filter((enroll)=>{
					return !!enroll.assigned_job_at
				}).reverse()
			}, 
			rejectEnrolls() {
				return this.enrollsByState(this.task.enrolls,-1).filter((enroll)=>{
					return !!enroll.rejected_at
				})
			},
			state() {
				return (enroll)=>{
					let index = this.stateCode(enroll)
					let config = [
						{
							iconCls:'icon-tianxin_jianzhi_queren',
							cls:'state_ok',
							text:'已通过',
						},
						{
							iconCls:null,
							cls:'state_raw',
							text:'同意',
						},
						{
							iconCls:'icon-tianxin_jianzhi_yiyi',
							cls:'state_reject',
							text:'已拒绝'
						},
					]
					
					return config[index]
				}
			}
		},
		methods:{
			async commit(type,selecteds,isCancel=false,params={}) {
 
				uni.showLoading({
					title: '正在处理'
				})

				let res = await this.$http.post('/manager/job/enrolls/assign', {
					enroll_ids: selecteds,
					type:type,
					op: isCancel?'cancel':null,
					...params
				})
				
				this.updateEnrolls(res.data)
				
				uni.showToast({
					title: '处理成功'
				})

				setTimeout(() => {
					this.currentSwiperItem = 0
					selecteds.splice(0,selecteds.length)
				}, 500)
			},
			onShowSeeder(){
				this.$refs.seedEnrollPopup.show()
			},
			async show() {
				this.showPopup = true
			},
			async _operate (type,...args){
				await this.operate(type,[this.enroll.id],this.task.enrolls,...args)
			},
			// async confirm(type,enroll){
			// 	//this.enroll = enroll
			// 	await this.commit('assign',[enroll.expected_job_id])
			// 	//Sthis.showPopup = false 
			// }
		}
	}
</script>
 
<style scoped>
	.state_ok {
		background-color: #fffeeb;
		color: #ff9d00;
		border: none;
		box-shadow: none;
		padding: 14rpx 26rpx;
	}
	
	.state_raw {
		border:  solid 1rpx #eee;
		box-shadow: 0px 0px 14px 0px #aaaaaa35;
		background-color: #fff;
		color: #000;
		padding: 14rpx 36rpx;
	}
	
	.state_reject {
		background-color: #fffeeb;
		color: #ff9d00;
		border: none;
		box-shadow: none;
		padding: 14rpx 26rpx;
	}
	
</style>